<template>



    <div class="content bg">
        <div v-if="oneShow">
            <div class="heard-class">
                <h1>{{INFO.ENTNAME}}</h1>
                <p>&nbsp;&nbsp;&nbsp;</p>
                <h2>WMS仓储作业绩效看板(条目)</h2>
                <p>&nbsp;&nbsp;&nbsp;</p>

            </div>
            <h1 class="time-class">{{INFO.TIME}}</h1>
            <div class="module-box">
                <!-- <dv-border-box-10 class="three-parts" > -->
                <div class="three-parts">
                        <h2>调度</h2>
                        <dv-active-ring-chart :config="dispatchData" class="box-size"/>
                        <!-- <PostCharts class="box-size" :XDATA="shelvesXData" :YDATA="shelvesYData"></PostCharts> -->
                </div>
                <!-- </dv-border-box-10> -->
                <div class="three-parts">
                        <h2>整货拣货</h2>
                        <!-- <dv-capsule-chart :config="wholePickingData" class="box-size"/> -->
                        <PostCharts class="box-size" :XDATA="wholePickingXData" :YDATA="wholePickingYData"></PostCharts>
                </div>
                <div class="three-parts">
                        <h2>上架</h2>
                        <!-- <dv-capsule-chart :config="shelvesData"  class="box-size"/> -->
                        <PostCharts class="box-size" :XDATA="shelvesXData" :YDATA="shelvesYData"></PostCharts>
                    </div>
            </div>

            <div class="module-box">
                <div class="three-parts">
                        <h2>补货</h2>
                        <PostCharts class="box-size" :XDATA="replenishmentXData" :YDATA="replenishmentYData"></PostCharts>

                </div>
                <div class="three-parts">
                        <h2>零货拣货</h2>
                        <PostCharts class="box-size" :XDATA="zeroPickingXData" :YDATA="zeroPickingYData"></PostCharts>
                </div>
                <div class="three-parts">
                        <h2>复核</h2>
                        <PostCharts class="box-size" :XDATA="reviewXData" :YDATA="reviewYData"></PostCharts>
                </div>
            </div>
        </div>

        <div v-if="twoShow">
            <div class="heard-class">
                <h1>{{INFO.ENTNAME}}</h1>
                <p>&nbsp;&nbsp;&nbsp;</p>
                <h2>WMS仓储作业绩效看板(件数)</h2>
                <p>&nbsp;&nbsp;&nbsp;</p>
            </div>
          <h1 class="time-class">{{INFO.TIME}}</h1>
            <div class="module-box">
                <div class="three-parts">
                        <h2>出库</h2>
                        <dv-active-ring-chart :config="outData" class="box-size"/>
                </div>

                <div class="three-parts">
                        <h2>整货拣货</h2>
                        <dv-capsule-chart :config="wholePickingData" class="box-size"/>
                        <!-- <PostCharts class="box-size" :XDATA="shelvesXData" :YDATA="shelvesYData"></PostCharts> -->
                </div>
                <div class="three-parts">
                        <h2>上架</h2>
                        <dv-capsule-chart :config="shelvesData"  class="box-size"/>
                        <!-- <PostCharts class="box-size" :XDATA="shelvesXData" :YDATA="shelvesYData"></PostCharts> -->
                    </div>
            </div>

            <div class="module-box">
                <div class="three-parts">
                        <h2>补货</h2>
                        <dv-capsule-chart :config="replenishmentData"  class="box-size"/>
                        <!-- <PostCharts class="box-size" :XDATA="shelvesXData" :YDATA="shelvesYData"></PostCharts> -->

                </div>
                <div class="three-parts">
                        <h2>零货拣货</h2>
                        <dv-capsule-chart :config="zeroPickingData"  class="box-size"/>
                        <!-- <PostCharts class="box-size" :XDATA="shelvesXData" :YDATA="shelvesYData"></PostCharts> -->
                </div>
                <div class="three-parts">
                        <h2>复核</h2>
                        <dv-capsule-chart :config="reviewData"  class="box-size"/>
                        <!-- <PostCharts class="box-size" :XDATA="shelvesXData" :YDATA="shelvesYData"></PostCharts> -->
                </div>
            </div>
        </div>
        <div v-if="threeShow">
          <div class="heard-class">
            <h1>{{ INFO.ENTNAME }}</h1>
            <p>&nbsp;&nbsp;&nbsp;</p>
            <h2>WMS仓储作业绩效看板 </h2>
            <p>&nbsp;&nbsp;&nbsp;</p>
          </div>
          <h1 class="time-class">{{INFO.TIME}}</h1>
              <h2>整货拣货</h2>
              <dv-capsule-chart :config="wholePickingAllData" class="full-box-size"/>
        </div>
        <div v-if="fourShow">
          <div class="heard-class">
            <h1>{{ INFO.ENTNAME }}</h1>
            <p>&nbsp;&nbsp;&nbsp;</p>
            <h2>WMS仓储作业绩效看板 </h2>
            <p>&nbsp;&nbsp;&nbsp;</p>
          </div>
          <h1 class="time-class">{{INFO.TIME}}</h1>
          <h2>零货拣货</h2>
          <dv-capsule-chart :config="zeroPickingAllData" class="full-box-size"/>
        </div>
        <div v-if="fiveShow">
          <div class="heard-class">
            <h1>{{ INFO.ENTNAME }}</h1>
            <p>&nbsp;&nbsp;&nbsp;</p>
            <h2>WMS仓储作业绩效看板 </h2>
            <p>&nbsp;&nbsp;&nbsp;</p>
          </div>
          <h1 class="time-class">{{INFO.TIME}}</h1>
          <h2>补货</h2>
          <dv-capsule-chart :config="replenishmentAllData" class="full-box-size"/>
        </div>
        <div v-if="sixShow">
          <div class="heard-class">
            <h1>{{ INFO.ENTNAME }}</h1>
            <p>&nbsp;&nbsp;&nbsp;</p>
            <h2>WMS仓储作业绩效看板 </h2>
            <p>&nbsp;&nbsp;&nbsp;</p>
          </div>
          <h1 class="time-class">{{INFO.TIME}}</h1>
          <h2>复核</h2>
          <dv-capsule-chart :config="reviewAllData" class="full-box-size"/>
        </div>
    </div>
</template>

<script>
import PostCharts from '../components/PostCharts.vue'

export default {
    components:{
        PostCharts
    },
    data (){
        return {
            // 整件拣货X轴
            wholePickingXData:['A','B','C','D','E','F'],
            // 整件拣货Y轴
            wholePickingYData:['160','150','140','130','120','110'],

            //零货拣货X轴
            zeroPickingXData:['A','B','C','D','E','F'],
            //零货拣货Y轴
            zeroPickingYData:['160','150','140','130','120','110'],
            //上架X轴
            shelvesXData:['A','B','C','D','E','F'],
            //上架Y轴
            shelvesYData:['160','150','140','130','120','110'],

            //补货X轴
            replenishmentXData:['A','B','C','D','E','F'],
            //补货Y轴
            replenishmentYData:['160','150','140','130','120','110'],

            //复核X轴
            reviewXData:['A','B','C','D','E','F'],
            //复核Y轴
            reviewYData:['160','150','140','130','120','110'],

            oneShow:true,
            twoShow:false,
            threeShow:false,
            fourShow:false,
            fiveShow:false,
            sixShow:false,
            timer: null,
            step:6,
            countStep:1,
            //表头信息
            INFO:{},
            jnHeight:'28px',


            dispatchData:{
                data:[
                    {
                        name: '已调度',
                        value: 315
                    },
                    {
                        name: '未调度',
                        value: 17
                    },
                ],
                showOriginValue: true,
                color:["#1F4DF4","#C99262"],
                lineWidth:50
            },
            outData:{
                data:[
                    {
                    name: '已出库',
                    value: 315
                    },
                    {
                    name: '未出库',
                    value: 17
                    },
                ],
                showOriginValue: true,
                color:["#1F4DF4","#C99262"],
                lineWidth:50
            },
            wholePickingData:{
                data: [
                    {
                    name: 'A',
                    value: 140
                    },
                    {
                    name: 'B',
                    value: 130
                    },
                    {
                    name: 'C',
                    value: 120
                    },
                    {
                    name: 'D',
                    value: 110
                    },
                  {
                    name: 'E',
                    value: 100
                  },
                  {
                    name: 'F',
                    value: 100
                  },
                ],
                colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                unit: '件数',
                showValue: true
            },
          wholePickingAllData:{
            data: [
              {
                name: 'A',
                value: 140
              },
              {
                name: 'B',
                value: 130
              },
              {
                name: 'C',
                value: 120
              },
              {
                name: 'D',
                value: 110
              },
              {
                name: 'E',
                value: 100
              },
              {
                name: 'F',
                value: 100
              },
              {
                name: 'G',
                value: 100
              },
              {
                name: 'H',
                value: 100
              },
              {
                name: 'I',
                value: 100
              },
            ],
            colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
            unit: '条目',
            showValue: true
          },
            zeroPickingData:{
                data: [
                    {
                    name: 'A',
                    value: 140
                    },
                    {
                    name: 'B',
                    value: 130
                    },
                    {
                    name: 'C',
                    value: 120
                    },
                    {
                    name: 'D',
                    value: 110
                    },
                    {
                    name: 'E',
                    value: 100
                    },
                ],
                colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                unit: '件数',
                showValue: true
            },
          zeroPickingAllData:{
            data: [
              {
                name: 'A',
                value: 140
              },
              {
                name: 'B',
                value: 130
              },
              {
                name: 'C',
                value: 120
              },
              {
                name: 'D',
                value: 110
              },
              {
                name: 'E',
                value: 100
              },
            ],
            colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
            unit: '条目',
            showValue: true
          },
            shelvesData:{
                data: [
                    {
                    name: 'A',
                    value: 140
                    },
                    {
                    name: 'B',
                    value: 130
                    },
                    {
                    name: 'C',
                    value: 120
                    },
                    {
                    name: 'D',
                    value: 110
                    },
                    {
                    name: 'E',
                    value: 100
                    },
                ],
                colors: ['#3E84F5', '#5FCE64', '#5AC5F9', '#AB4FDC', '#3575F1'],
                unit: '件数',
                showValue: true
            },
            replenishmentData:{
                data: [
                    {
                    name: 'A',
                    value: 140
                    },
                    {
                    name: 'B',
                    value: 130
                    },
                    {
                    name: 'C',
                    value: 120
                    },
                    {
                    name: 'D',
                    value: 110
                    },
                    {
                    name: 'E',
                    value: 100
                    },
                ],
                colors: ['#3E84F5', '#5FCE64', '#5AC5F9', '#AB4FDC', '#3575F1'],
                unit: '件数',
                showValue: true
            },
            replenishmentAllData:{
              data: [
                {
                  name: 'A',
                  value: 140
                },
                {
                  name: 'B',
                  value: 130
                },
                {
                  name: 'C',
                  value: 120
                },
                {
                  name: 'D',
                  value: 110
                },
                {
                  name: 'E',
                  value: 100
                },
              ],
              colors: ['#3E84F5', '#5FCE64', '#5AC5F9', '#AB4FDC', '#3575F1'],
              unit: '条目',
              showValue: true
            },
            reviewData:{
                data: [
                    {
                    name: 'A',
                    value: 140
                    },
                    {
                    name: 'B',
                    value: 130
                    },
                    {
                    name: 'C',
                    value: 120
                    },
                    {
                    name: 'D',
                    value: 110
                    },
                    {
                    name: 'E',
                    value: 100
                    },
                ],
                colors: ['#3E84F5', '#5FCE64', '#5AC5F9', '#AB4FDC', '#3575F1'],
                unit: '件数',
                showValue: true
            },
          reviewAllData:{
            data: [
              {
                name: 'A',
                value: 140
              },
              {
                name: 'B',
                value: 130
              },
              {
                name: 'C',
                value: 120
              },
              {
                name: 'D',
                value: 110
              },
              {
                name: 'E',
                value: 100
              },
            ],
            colors: ['#3E84F5', '#5FCE64', '#5AC5F9', '#AB4FDC', '#3575F1'],
            unit: '条目',
            showValue: true
          },
        }
    },
    methods:{
        setTimer() {
            if(this.timer == null) {
                this.timer = setInterval( () => {
                   this.getWholeMsg();
                    this.getWholeTwoMsg();
                    this.getWholeAllMsg();
                    this.getZeroMsg();
                    this.getZeroTwoMsg();
                    this.getZeroAllMsg();
                    this.getShelvesMsg();
                    this.getShelvesTwoMsg();
                    this.getReplenishmentMsg();
                    this.getReplenishmentTwoMsg();
                    this.getReplenishmentAllMsg();
                    this.getReviewMsg();
                    this.getReviewTwoMsg();
                    this.getReviewAllMsg();
                    this.getDispatchMsg();
                    this.getOutBillMsg();
                    this.getReviewAllMsg();
                    this.countStep++;
                    if(this.countStep%this.step == 1){
                      this.oneShow = true;
                      this.twoShow = false;
                      this.threeShow = false;
                      this.fourShow = false;
                      this.fiveShow = false;
                      this.sixShow = false;
                    }else if(this.countStep%this.step == 2){
                      this.oneShow = false;
                      this.twoShow = true;
                      this.threeShow = false;
                      this.fourShow = false;
                      this.fiveShow = false;
                      this.sixShow = false;
                    }else if(this.countStep%this.step == 3){
                      this.oneShow = false;
                      this.twoShow = false;
                      this.threeShow = true;
                      this.fourShow = false;
                      this.fiveShow = false;
                      this.sixShow = false;
                    }else if(this.countStep%this.step == 4){
                      this.oneShow = false;
                      this.twoShow = false;
                      this.threeShow = false;
                      this.fourShow = true;
                      this.fiveShow = false;
                      this.sixShow = false;
                    }else if(this.countStep%this.step == 5){
                      this.oneShow = false;
                      this.twoShow = false;
                      this.threeShow = false;
                      this.fourShow = false;
                      this.fiveShow = true;
                      this.sixShow = false;
                    }else if(this.countStep%this.step == 0){
                      this.oneShow = false;
                      this.twoShow = false;
                      this.threeShow = false;
                      this.fourShow = false;
                      this.fiveShow = false;
                      this.sixShow = true;
                    }
                }, 10000)
            }
        },
        getOutBillMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取出库
          params.M_BS = "OUTBILL";
          this.$api.query(params).then(res=>{
              const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.outData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
              }
          }).then(success =>{

          }).catch(err=>{
              console.log(err);
          })
        },
        getDispatchMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取调度
          params.M_BS = "DISPATCH";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.dispatchData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getReviewMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取复核
          params.M_BS = "REVIEW";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.reviewXData = [];
                  this.reviewYData = [];
                  request.list.forEach(element => {
                      this.reviewXData.push(element.STAFFNAME);
                      this.reviewYData.push(element.NUM);

                   });
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getReviewTwoMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取上架拣货
          params.M_BS = "REVIEWTWO";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
            if(typeof request.list!="undefined"){
              this.reviewData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
            }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getReviewAllMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取上架拣货
          params.M_BS = "REVIEWALL";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
            if(typeof request.list!="undefined"){
              this.reviewAllData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
            }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getReplenishmentMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取补货
          params.M_BS = "REPLENISHMENT";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.replenishmentXData = [];
                  this.replenishmentYData = [];
                  request.list.forEach(element => {
                      this.replenishmentXData.push(element.STAFFNAME);
                      this.replenishmentYData.push(element.NUM);
                   });
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getReplenishmentTwoMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取上架拣货
          params.M_BS = "REPLENISHMENTTWO";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
            if(typeof request.list!="undefined"){
              this.replenishmentData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
            }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getReplenishmentAllMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取上架拣货
          params.M_BS = "REPLENISHMENTALL";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
            if(typeof request.list!="undefined"){
              this.replenishmentAllData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
            }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getShelvesTwoMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
           // 获取上架拣货
          params.M_BS = "SHELVESTWO";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.shelvesData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getShelvesMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取上架拣货
          params.M_BS = "SHELVES";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.shelvesXData = [];
                  this.shelvesYData = [];
                  request.list.forEach(element => {
                      this.shelvesXData.push(element.STAFFNAME);
                      this.shelvesYData.push(element.NUM);
                   });
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getZeroAllMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          params.M_BS = "ZEROALL";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
            if(typeof request.list!="undefined"){
              this.zeroPickingAllData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
            }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getZeroTwoMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          params.M_BS = "ZEROTWO";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.zeroPickingData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getZeroMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取零货拣货
          params.M_BS = "ZERO";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.zeroPickingXData = [];
                  this.zeroPickingYData = [];
                  request.list.forEach(element => {
                      this.zeroPickingXData.push(element.STAFFNAME);
                      this.zeroPickingYData.push(element.NUM);
                   });
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getWholeAllMsg() {
          const params = {};

          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取整货拣货
          params.M_BS = "WHOLEALL";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
            if(typeof request.list!="undefined"){
              this.wholePickingAllData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
              console.log(this.wholePickingAllData.data);
            }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getWholeTwoMsg() {
          const params = {};
          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取整货拣货
          params.M_BS = "WHOLETWO";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
              if(typeof request.list!="undefined"){
                  this.wholePickingData.data =  JSON.parse(JSON.stringify(request.list).toLocaleLowerCase());
              }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },
        getWholeMsg(){
          const params = {};

            params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
            // 获取整货拣货
            params.M_BS = "WHOLE";
            this.$api.query(params).then(res=>{
              const request = JSON.parse(res);
                console.log(res);
                if(typeof request.list!="undefined"){
                    this.wholePickingXData = [];
                    this.wholePickingYData = [];
                    request.list.forEach(element => {
                        this.wholePickingXData.push(element.STAFFNAME);
                        this.wholePickingYData.push(element.NUM);
                     });
                }
            }).then(success =>{

            }).catch(err=>{
              console.log(err);
            })
        },
        getInfoMsg() {
          const params = {};
          params.M_PRO_NAME = "WMS_BIGSCREEN_SIGNAGE";
          // 获取出库
          params.M_BS = "INFO";
          this.$api.query(params).then(res=>{
            const request = JSON.parse(res);
            if(typeof request.list!="undefined"){
              this.INFO = request.list[0];
              console.log(this.INFO);
            }
          }).then(success =>{

          }).catch(err=>{
            console.log(err);
          })
        },

    },
    created: function() {
        // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
        clearInterval(this.timer);
        this.timer = null;
        this.setTimer() ;
        this.getInfoMsg();
     },
    onLoad() {
      // 进入当前页面 自动切换成固定横屏
      // #ifdef APP-PLUS
      plus.screen.lockOrientation("default");
      // #endif
    },
    onUnload() {

    },

}
</script>

<style scoped>
    h2{
        height: 48px;
        color: white;
        font-size: 20px;
        font-weight: 400;
        text-align: center;
        line-height: 48px;
    }
    h1{
        text-align: center;
    }
    .heard-class{
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }

    ::v-deep .dv-capsule-chart .capsule-item .capsule-item-column{
        height: 28px !important;
    }

    ::v-deep .dv-capsule-chart .capsule-item {
        box-shadow: 0 0 3px #999;
        height: 32px !important;
        margin: 5px 0px;
        border-radius: 5px;
    }
    .chart_lanscape {
         height: 82vh;
         font-size: 2vw;
         text-align: center;

    }

    .tbcls {
      width: 98vw;
    }
    .time-class{
      text-align: right;
      width: 90%;
    }
</style>
